<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:blocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames">
          <draggable v-model="formData.templateBlockList" chosenClass="active" animation="500" filter=".forbid" :preventOnFilter="false">
            <template v-for="(item, index) in formData.templateBlockList">
              <el-collapse-item title="图片" :name="index" class="game-select editForm" :key="index">
                <div class="form-item">
                  <label>头像</label>
                  <ele-form-upload-plus-file v-model="item.settings.user_image" title="头像"  />
                </div>
                <div class="form-item">
                  <label>名称</label>
                  <el-input v-model="item.settings.name" placeholder="名称"></el-input>
                </div>
                <div class="form-item">
                  <label>星级</label>
                  <el-slider v-model="item.settings.star" :min="0" :max="5"></el-slider>
                </div>
                <div class="form-item">
                  <label>链接</label>
                  <ele-form-custom-select v-model="item.settings.url"/>
                </div>
                <div class="form-item">
                  <label>文字</label>
                  <el-input type="textarea"
                            :autosize="{ minRows: 4, maxRows: 6}" v-model="item.settings.text" placeholder="请输入文本"></el-input>
                </div>
                <div class="selected" v-if="!item.settings.product || item.settings.product.id !== 0">
                  <span class="value"><img :src="item.settings.product.mainImage" height="30px" alt="">{{ item.settings.product.spuName }}</span>
                  <span class="icons">
            <i class="el-icon-sort" @click="isOpen = true"></i>
            <i class="icon_custom el-icon-delete" @click="delProduct(index)"></i>
          </span>
                </div>
                <el-button v-else type="primary" size="small" @click="handleAddProduct(index)"
                           style="width: 260px;margin: auto;display: block">选择商品
                </el-button>
                <div class="form-item">
                  <el-button v-if="formData.templateBlockList.length > 1" class="addBtn" @click="handleRemove(index)"><i
                      class="el-icon-remove"></i>删除内容
                  </el-button>
                </div>
              </el-collapse-item>
            </template>
          </draggable>
          <el-button type="primary" size="small" class="addBtn" @click="addPic" v-if="formData.templateBlockList.length<4"><i class="el-icon-plus"></i>添加图片</el-button>
        </el-collapse>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div
            class="rest-btn"
            @click="reset"
        >
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
    <product-dialog :productDialogVisible="isOpen" @save="getSelectData" @close="isOpen = false"></product-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import { debounce, deepClone } from '@/utils/utils';
import productDialog from '_c/Dialog/product_dialog.vue';
const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];

export default {
    name: 'InsCollectionForm',
    components: {productDialog, draggable},
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                const val = JSON.parse(newVal.styleJson);
                // if (!val.show_likes) {
                //     val.show_likes = true;
                // }
                // if (!val.min_likes) {
                //     val.min_likes = 1;
                // }
                // if (!val.max_likes) {
                //     val.max_likes = 1000;
                // }
                // if (!val.show_comments) {
                //     val.show_comments = true;
                // }
                // if (!val.min_comments) {
                //     val.min_comments = 1;
                // }
                // if (!val.max_comments) {
                //     val.max_comments = 1000;
                // }
                const d = val.templateBlockList;
                d.forEach(s => {
                    if (!s.settings.account_id) {
                        s.settings.account_id = 'Name';
                    }
                    if (!s.settings.date) {
                        s.settings.date = '3 days ago';
                    }
                    if (!s.settings.text) {
                        s.settings.text = 'Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.';
                    }
                    if (!s.settings.product) {
                        s.settings.product = {
                            id: 0,
                            spuName: '',
                            mainImage: ''
                        };
                    }
                });
                this.formData = d;
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            currentIndex: 0,
            isOpen: false,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            pageCount: 1,
            activeNames: [],
            sections: [
                {
                    title: '设置',
                    formDesc: {
                        'title': {
                            type: 'input',
                            label: '标题'
                        },
                        'sub_title': {
                            type: 'ele-form-quill-edit',
                            label: '副标题'
                        },
                        'show_likes': {
                            type: 'switch',
                            break: true,
                            label: '显示喜欢'
                        },
                        'show_comments': {
                            type: 'switch',
                            break: true,
                            label: '显示评论'
                        },
                        'ins_bg': {
                            type: 'color',
                            label: '背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                },
                {
                    title: '内容',
                    formDesc: {
                        'blocks': {}
                    }
                },
                {
                    title: '间距留白',
                    formDesc: {
                        'module_layout': {
                            type: 'ele-spacing'
                        }
                    }
                }
            ]
        };
    },
    methods: {
        handleTableList () {
            this.isOpen = true;
        },
        getSelectData (data) {
            console.log(data, this.formData.templateBlockList);
            this.formData.templateBlockList[this.currentIndex].settings.product = data;
        },
        delProduct (index) {
            this.formData.templateBlockList[index].settings.product = {
                id: 0,
                spuName: '',
                mainImage: ''
            };
        },
        addPic () {
            const params = deepClone(this.formData.defaultBlockList[0]);
            this.formData.templateBlockList.push(params);
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleAddProduct (index) {
            this.currentIndex = index;
            this.isOpen = true;
        },
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        handleRemove (index, record) {
            this.formData.templateBlockList.splice(index, 1);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600),
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        }
    },
    mounted () {
        if (!('module_layout' in this.formData)) {
            this.$set(this.formData, 'module_layout', {
                left: 0,
                top: 0,
                right: 0,
                bottom: 0
            });
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}
.editForm {
  margin-bottom: 10px;
  .form-item {
    margin-top: 10px;
    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }
  ::v-deep .el-collapse-item__content {
    border: 1px solid #d8deec;
    border-top: 0;
    padding-left: 10px;
  }
}
.addBtn {
  width: 100%;
}
.custom-title{
  display: flex;
  align-items: center;
  .icon, img{
    margin-right: 6px;
  }
}
</style>
